<template>
  <v-app>
    <v-content>
      <v-container>
        <v-layout fluid>
          <v-card width="350" flat class="to-center">
            <v-card-title>
              <h2>连接状态</h2>
            </v-card-title>
            <v-card-text>
              <v-list>
                <v-list-tile>
                  <v-list-tile-title>{{conn.url}}</v-list-tile-title>
                  <v-list-tile-action>
                    <v-avatar>
                      <span v-if="!!conn.status && conn.status == 'ok'">😄</span>
                      <span v-else>☹</span>
                    </v-avatar>
                  </v-list-tile-action>
                </v-list-tile>
              </v-list>
            </v-card-text>
          </v-card>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "ServerPort",
  data: () => ({
    ipRules: [],
    portRules: []
  }),
  computed: {
    ...mapState("startmenu", ["conn"])
  }
};
</script>

<style>
.to-middle {
  height: 100px;
  width: 100%;
  padding-top: 100px;
}

.to-center {
  position: relative;
  margin-left: 27%;
}
</style>
